let app = new Vue({
    el: '#app',
    data: {
        user: JSON.parse(sessionStorage.getItem('user')),
        messages: [],
        unreadNum:0,
        startNum:0,
        endNum:5,
        currPage:1,     //当前页
        pageSum:null    //总页数
    },
    created() {
        // 查询当前用户的所有消息
        $.ajax({
            url: 'http://localhost:8080/message/selectAll',
            data: { receiveUserId: this.user.userId },
            type: 'get',
            success: function (vo) {
                if (vo.code == 200) {
                    app.messages = vo.data;
                    //总页数
                    app.pageSum=vo.data.length%5==0 ? Math.floor(vo.data.length/5) : Math.floor(vo.data.length/5)+1 ;

                    // 遍历查询当前用户的未读消息数
                    for (let index = 0; index < vo.data.length; index++) {
                        if(vo.data[index].status==1){
                            app.unreadNum=app.unreadNum+1;
                        }
                    }
                    sessionStorage.setItem("unreadNum",app.unreadNum);
                }
            }
        });
        // layui.use('element', function () {
        //     var element = layui.element;           
        //     $.ajax({
        //         url: 'http://localhost:8080/message/selectAll',
        //         data: { receiveUserId: app.user.userId },
        //         type: 'get',
        //         success: function (vo) {
        //             if (vo.code == 200) {
        //                 $.each(vo.data, function(index, m){
        //                     $('#messageApp').append(
        //                         "<div class='layui-colla-item'>"+
        //                             "<h2 class='layui-colla-title' style='user-select: none;'>"+m.title+
        //                             "<span class='el-tag' style='margin-left: 978px;'>"+(m.status==1?"未读":"已读")+"</span></h2>"+
        //                             "<div class='layui-colla-content' style='user-select: none;'>"+
        //                                 "<div>发送人："+m.sendUserName+"</div>"+
        //                                 "<div>发送时间："+m.createTime+"</div>"+
        //                                 "<div>发送内容："+m.content+"</div>"+
        //                             "</div>"+
        //                         "</div>"
        //                     );
        //                 });
        //                 app.messages = vo.data;
        //                 console.log(app.messages);
        //             }
        //             element.render('test');
        //         }
        //     });
        // });
    },
    methods:{
        change:function(id,status,index,event){
            //获取点击对象   
            let el = event.currentTarget;
            let current=$(el).find(".layui-colla-content");
            let ico=$(el).find("i");

            if(current.hasClass('layui-show')){
                current.removeClass('layui-show');
                ico.removeClass('layui-icon-down');
                ico.addClass('layui-icon-right');
            }else{
                current.addClass('layui-show');
                ico.removeClass('layui-icon-right');
                ico.addClass('layui-icon-down');
            }
            
            if(status==2){
                return;
            }
            $.ajax({
                url:'http://localhost:8080/message/update',
                type:'post',
                data:{messageId:id,status:2},
                success:function(vo){
                    if(vo.code==200){
                        app.messages[index].status=2;
                        app.unreadNum=app.unreadNum-1;
                        sessionStorage.setItem("unreadNum",app.unreadNum);
                    }
                }
            });
            if(app.unreadNum==0){
                $(".layui-badge-dot").hide();
                $(".layui-badge").hide();
            }

            $(el).find("span").html("已读");
            $(el).find("span").removeClass("not");
        },
        //上一页
        up:function(){
            if(this.currPage==1){
                return;
            }
            if(this.currPage<=this.pageSum){
                $(".btn-next").removeClass("disabled");
            }
            this.startNum=this.startNum-5;
            this.endNum=this.endNum-5;
            this.currPage=this.currPage-1;

            if(this.currPage==1){
                $(".btn-prev").addClass("disabled");
            }
        },
        //下一页
        down:function(){
            if(this.currPage==this.pageSum){
                return;
            }
            if(this.currPage>=1){
                $(".btn-prev").removeClass("disabled");
            }
            this.startNum=this.startNum+5;
            this.endNum=this.endNum+5;
            this.currPage=this.currPage+1;
            if(this.currPage==this.pageSum){
                $(".btn-next").addClass("disabled");
            }
        }
    }
});

